<template>
  <div id="rightThird" class="zpsjz-item-bg">
    <div class="grid-item">
      <!-- 垃圾清运 -->
      <!-- 标题 -->
      <div class="title">
        <span>垃圾清运</span>
        <YearOrMonthSwitch class="yearOrMonth" :year="isThirdItemShowYear" />
      </div>
      <!-- 四个信息框 -->
      <div class="third-message">
        <message
          :number="rubbishData.data.fill.value"
          :unit="rubbishData.data.fill.unit"
          :isSelect="selectedMessageDivByTime(1)"
        />
        <message
          :number="rubbishData.data.burn.value"
          :unit="rubbishData.data.burn.unit"
          :isSelect="selectedMessageDivByTime(2)"
        />
        <message
          :number="rubbishData.data.kitchen.value"
          :unit="rubbishData.data.kitchen.unit"
          :isSelect="selectedMessageDivByTime(3)"
        />
        <message
          :number="rubbishData.data.tempfill.value"
          :unit="rubbishData.data.tempfill.unit"
          :isSelect="selectedMessageDivByTime(0)"
        />
      </div>
      <!-- 图表 -->
      <ThirdEcharts class="third-echarts" :rdata="rubbishChartData.chartData" />
      <div class="center-bottom grid-item center-bottom-right">
        <!-- 标题 -->
        <div class="title">
          <span>市场监管统计</span>
        </div>
        <div class="wrap_scjg">
          <!-- 显示住房保障、住房总面积、受益人数总计、受益人数新增 -->
          <div class="scjg_shu">
            <ShowCenterSecondInfo
              :img="hoursenumimg"
              title="检查批次数"
              :number="socialHouseData.data.jzy_scjgtj_jcpcs"
              unit1="套"
            />
            <ShowCenterSecondInfo
              :img="hourseareaimg"
              title="检查对象数"
              :number="socialHouseData.data.jzy_scjgtj_jcdxs"
              unit1="m²"
              style="margin-top:1.5rem"
            />
            <ShowCenterSecondInfo
              :img="sumofpeopleimg"
              title="查出问题数"
              :number="socialHouseData.data.jzy_scjgtj_ccwts"
              unit1="↑"
              style="margin-top:1.5rem"
            />
            <ShowCenterSecondInfo
              :img="addpeoplenumimg"
              title="问题整改数"
              :number="socialHouseData.data.jzy_scjgtj_wtzgs"
              unit1="↑"
              style="margin-top:1.5rem"
            />
          </div>
          <!-- 中线 -->
          <div class="zhongxian"></div>
          <!-- 右侧图标表显示 -->
          <div class="you_yuan">
            <div class="you_daohang">
              <div class="you_daohang_div">
                <span>按抽查项目</span>
                <div :class="isThirdItemShowYear ? '_xiahua':''"></div>
              </div>
              <div class="you_daohang_div">
                <span>按抽查企业</span>
                <div :class="isThirdItemShowYear ?'': '_xiahua'"></div>
              </div>
            </div>
            <div
              style="ont-family: PingFangSC-Regular;font-size: 0.9rem;color: #BED7FA;letter-spacing: 0;"
            ></div>
            <CentSecondChart :chartData.sync="socialHouseChartData.seriesData" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import message from "../../components/homePage/MessageDiv";
import ThirdEcharts from "../../components/echart/left/ThirdEcharts";
import YearOrMonthSwitch from "../../components/homePage/YearOrMonthSwitch";
import CentSecondChart from "../../components/echart/center/CentSecondChart";
import ShowCenterSecondInfo from "../../components/homePage/ShowCenterSecondInfo";

export default {
  name: "rightThird",
  components: {
    message,
    ThirdEcharts,
    YearOrMonthSwitch,
    ShowCenterSecondInfo,
    CentSecondChart
  },
  data() {
    return {
      count: 1,
      // 保障房展示数据是否是年 标识符
      isThirdItemShowYear: true,
      url: "http://10.10.208.6:2020/home/serv",
      theBaseUrl: "http://10.10.208.6:30400/Statistics",
      // 垃圾清运数据
      rubbishData: {
        data: {
          fill: {
            value: "",
            unit: "填埋(吨)"
          },
          burn: {
            value: "",
            unit: "焚烧(吨)"
          },
          kitchen: {
            value: "",
            unit: "餐厨(吨)"
          },
          tempfill: {
            value: "",
            unit: "临时填埋(吨)"
          }
        },
        year: {
          fill: {
            value: "",
            unit: "填埋(吨)"
          }
        },
        month: {}
      },
      // 垃圾清运数据
      rubbishChartData: {
        chartData: {
          xAxisData: ["22"],
          seriesData: [23]
        },
        year: {},
        month: {}
      },
      // 保障房展示数据是否是年 标识符
      isSecondItemShowYear: true,
      // 市场监管计时器的执行次数
      socialHouseIntervalCount: 1,
      // 市场监管的四个图标的url
      hoursenumimg: require("../../assets/right/second/scjg_jcpc.png"),
      hourseareaimg: require("../../assets/right/second/scjg_jzdx.png"),
      sumofpeopleimg: require("../../assets/right/second/scjg_ccwt.png"),
      addpeoplenumimg: require("../../assets/right/second/scjg_wtzg.png"),
      // 市场监管统计数据
      socialHouseData: {
        data: {
          jzy_scjgtj_jcpcs: 16000,
          jzy_scjgtj_jcdxs: 38000,
          jzy_scjgtj_ccwts: 28000,
          jzy_scjgtj_wtzgs: 24000
        },
        // 存放当前年的市场监管统计数据
        year: {},
        // 存放当前月的市场监管统计数据
        month: {}
      },
      // 市场监管统计按抽查数据
      socialHouseChartData: {
        seriesData: {
          ShantyTownNewWorkRatio: 16000,
          SubsidizedHousingPrjCompletedRatio: 38000,
          PublicHouseRentalSubsidyRatio: 28000,
          PublicHouseAssignedRatio: 24000
        },
        year: {
          ShantyTownNewWorkRatio: 16000,
          SubsidizedHousingPrjCompletedRatio: 38000,
          PublicHouseRentalSubsidyRatio: 28000,
          PublicHouseAssignedRatio: 24000
        },
        month: {
          ShantyTownNewWorkRatio: 26000,
          SubsidizedHousingPrjCompletedRatio: 35000,
          PublicHouseRentalSubsidyRatio: 27000,
          PublicHouseAssignedRatio: 25000
        }
      }
    };
  },
  mounted() {
    this.getThemeRubbishYear();
    // this.marketSupervision();
  },
  watch: {
    isThirdItemShowYear(newName) {
      if (newName) {
        this.socialHouseChartData.seriesData = this.socialHouseChartData.year;
      } else {
        this.socialHouseChartData.seriesData = this.socialHouseChartData.month;
      }
      // console.log("newName", newName, "+", "oldName", oldName);
    }
  },
  methods: {
    // 垃圾清运接口
    getThemeRubbishYear() {
      let url = this.theBaseUrl + "/GetThemeRubbishYear";
      let param = { year: 2019, month: 10 };
      // http://10.10.208.6:2020/home/serv?path=st&groupid=15&year=1&ismonth=1
      // let param = { path: "st", groupid: 15, year: 1, month: 1 };
      this.http.post(url, param).then(response => {
        // console.log(response);
        let resData = response.data;
        // 转换接口获取参数
        let rubbishData = this.rubbishData;
        let rubbishDataYear = {
          fill: {
            value: resData.yearfill,
            unit: "填埋(吨)"
          },
          burn: {
            value: resData.yearburn,
            unit: "焚烧(吨)"
          },
          kitchen: {
            value: resData.yearkitchen,
            unit: "餐厨(吨)"
          },
          tempfill: {
            value: resData.yeartempfill,
            unit: "临时填埋(吨)"
          }
        };
        let rubbishDataMonth = {
          fill: {
            value: resData.monthfill,
            unit: "填埋(吨)"
          },
          burn: {
            value: resData.monthburn,
            unit: "焚烧(吨)"
          },
          kitchen: {
            value: resData.monthkitchen,
            unit: "餐厨(吨)"
          },
          tempfill: {
            value: resData.monthtempfill,
            unit: "临时填埋(吨)"
          }
        };
        // 处理数据,若数据大于1万,进行缩放
        rubbishDataMonth = this.scaleNumber(rubbishDataMonth);
        rubbishDataYear = this.scaleNumber(rubbishDataYear);

        rubbishData.data = rubbishDataYear;
        rubbishData.year = rubbishDataYear;
        rubbishData.month = rubbishDataMonth;
        // 计算各个区的每年每月的垃圾总量
        let xAxisData = [];
        let chartYear = {
          fill: [],
          burn: [],
          kitchen: [],
          tempfill: []
        };
        let chartMonth = {
          fill: [],
          burn: [],
          kitchen: [],
          tempfill: []
        };
        let model = resData.model;
        model.forEach(element => {
          xAxisData.push(element.areaname);
          chartMonth.fill.push(element.fill);
          chartMonth.burn.push(element.burn);
          chartMonth.kitchen.push(element.kitchen);
          chartMonth.tempfill.push(element.tempfill);
          chartYear.fill.push(element.cumulativefill);
          chartYear.burn.push(element.cumulativeburn);
          chartYear.kitchen.push(element.cumulativekitchen);
          chartYear.tempfill.push(element.cumulativetempfill);
        });
        this.rubbishChartData.chartData.xAxisData = xAxisData;
        this.rubbishChartData.chartData.seriesData = chartYear.fill;
        this.rubbishChartData.month = chartMonth;
        this.rubbishChartData.year = chartYear;

        let _this = this;
        setInterval(function() {
          _this.count += 1;
          let mod = _this.count % 8;
          if (mod > 4 || mod === 0) {
            _this.isThirdItemShowYear = false;
            _this.rubbishData.data = _this.rubbishData.month;
          } else {
            _this.isThirdItemShowYear = true;
            _this.rubbishData.data = _this.rubbishData.year;
          }
          let data = _this.rubbishChartData.chartData.seriesData;
          let chartYear = _this.rubbishChartData.year;
          let chartMonth = _this.rubbishChartData.month;

          switch (mod) {
            case 1: {
              data = chartYear.fill;
              break;
            }
            case 2: {
              data = chartYear.burn;
              break;
            }
            case 3: {
              data = chartYear.kitchen;
              break;
            }
            case 4: {
              data = chartYear.tempfill;
              break;
            }
            case 5: {
              data = chartMonth.fill;
              break;
            }
            case 6: {
              data = chartMonth.burn;
              break;
            }
            case 7: {
              data = chartMonth.kitchen;
              break;
            }
            case 0: {
              data = chartMonth.tempfill;
              break;
            }
          }
          _this.rubbishChartData.chartData.seriesData = data;
        }, 5 * 1000);
      });
    },
    // 垃圾清运 控制上方四个方框的选择
    selectedMessageDivByTime(data) {
      let count = this.count;
      let mod = count % 4;
      if (mod === data) {
        return true;
      } else {
        return false;
      }
    },
    // 垃圾清运 如果数据大于10000,进行数字转化
    scaleNumber(data) {
      let tag = ["fill", "burn", "kitchen", "tempfill"];
      tag.forEach(item => {
        let value = data[item].value;
        if (!value) {
          return;
        }
        if (value > 10 * 1000) {
          let unit = data[item].unit;
          data[item].value = (value / 10000).toFixed(2);
          data[item].unit = unit.replace("吨)", "万吨)");
        }
      });
      return data;
    },
    //市场监管统计
    marketSupervision() {
      let params = { path: "st", groupid: 8, year: 1, month: 1 };
      this.http.post(this.url, params).then(res => {
        console.log("市场监管统计", res);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../assets/scss/building/rightThird.scss";
</style>